<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="样式"
                desc="type"
                :options="types"
                v-model="type"
            ></uxt-single-selector-bar>
            <uxt-bar title="大小" desc="size">
                <template slot="right">
                    <uxt-radio-group v-model="size" size="sm" type="btn">
                        <uxt-radio classes="margin-right-sm" label="默认" value="df"></uxt-radio>
                        <uxt-radio label="sm" value="sm"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar title="标签位置" desc="label-position">
                <template slot="right">
                    <uxt-radio-group v-model="labelPosition" size="sm" type="btn">
                        <uxt-radio classes="margin-right-sm" label="左" value="left"></uxt-radio>
                        <uxt-radio label="右" value="right"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="颜色"
                desc="color | bg-color=xx/颜色值"
                v-model="color"
                :light="type === 0 || type === 3"
                :gradual="type === 0 || type === 3"
                clearable
            ></uxt-color-selector-bar>
            <uxt-bar title="禁用" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="disabled" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="宽度" desc="width">
                <template slot="right">
                    <uxt-input
                        classes="solid radius"
                        :styles="{ width: '100rpx' }"
                        v-model="width"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="v-model绑定(单个)">
                <template slot="right">
                    <uxt-switch
                        v-model="vmodel1"
                        radius
                        size="sm"
                        @change="vmodel = $event.detail.checked"
                    ></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-checkbox
                    classes="margin-xs"
                    checked
                    label="选项"
                    :type="types[type]"
                    :size="size"
                    :label-position="labelPosition"
                    :color="color2"
                    :bg-color="bgColor2"
                    :disabled="disabled"
                    :width="width"
                    v-model="vmodel"
                    @change="handleChange"
                ></uxt-checkbox>
            </view>
            <view v-if="vmodel1" class="padding bg-white text-center solid-top">
                {{ Array.isArray(vmodel) ? JSON.stringify(vmodel) : vmodel }}
            </view>
        </uxt-bar-group>
        <uxt-bar-group title="复选框组">
            <uxt-bar title="@change"></uxt-bar>
            <view class="padding bg-white text-center">
                <uxt-checkbox-group
                    :type="types[type]"
                    :size="size"
                    :label-position="labelPosition"
                    :item-width="width"
                    :value="gvalue"
                    :disabled="disabled"
                    @change="handleGroupChange"
                >
                    <uxt-checkbox
                        classes="margin-xs"
                        v-for="(item, i) in 4"
                        :key="i"
                        :label="`选项${i + 1}`"
                        :color="color2"
                        :bg-color="bgColor2"
                        :value="`${i + 1}`"
                        @change="handleChange"
                    ></uxt-checkbox>
                </uxt-checkbox-group>
            </view>
            <view class="padding bg-white text-center solid-top solid-bottom">
                {{ JSON.stringify(gvalue) }}
            </view>
            <uxt-bar title="v-model绑定"></uxt-bar>
            <view class="padding bg-white text-center">
                <uxt-checkbox-group
                    :type="types[type]"
                    :size="size"
                    :label-position="labelPosition"
                    :item-width="width"
                    :disabled="disabled"
                    v-model="gvmodel"
                >
                    <uxt-checkbox
                        classes="margin-xs"
                        v-for="(item, i) in 4"
                        :key="i"
                        :label="`选项${i + 1}`"
                        :color="color2"
                        :bg-color="bgColor2"
                        :value="`${i + 1}`"
                        @change="handleChange"
                    ></uxt-checkbox>
                </uxt-checkbox-group>
            </view>
            <view class="padding bg-white text-center solid-top">
                {{ JSON.stringify(gvmodel) }}
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtCheckboxGroup from '@xtcoder/uxt/components/uxt-checkbox-group.vue'

export default {
    components: {
        uxtBarGroup,
        uxtSingleSelectorBar,
        uxtBar,
        uxtRadio,
        uxtRadioGroup,
        uxtColorSelectorBar,
        uxtSwitch,
        uxtInput,
        uxtCheckbox,
        uxtCheckboxGroup
    },
    data() {
        return {
            title: '复选框',
            types: ['df', 'hollow', 'onlyicon', 'btn'],
            type: 0,
            size: 'df',
            labelPosition: 'right',
            color: '',
            disabled: false,
            width: '',
            vmodel1: false,
            vmodel2: false,
            vmodel: undefined,
            vmodel2: ['1', '2', '3', '4'],
            gvalue: ['1', '2', '3', '4'],
            gvmodel: ['1', '2', '3', '4'],
            events: ''
        }
    },
    computed: {
        color2() {
            if (this.type === 2) {
                return this.color
            } else {
                return ''
            }
        },
        bgColor2() {
            if (this.color === '') {
                return 'theme'
            }
            if (this.type === 2) {
                return ''
            } else {
                return this.color
            }
        }
    },
    methods: {
        handleChange(e) {
            this.events += `checkbox->@change(${JSON.stringify(e)})<br />`
        },
        handleGroupChange(e) {
            this.gvalue = e.detail.value
            this.events += `checkbox-group->@change(${JSON.stringify(e)})<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
